<template>
    <div class="edu-page-warp">
        <filter-card :options="options" :queryForm="queryForm" :buttons="buttons"></filter-card>
        <div class="edu-page-title mg-top">学生学籍信息列表</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="border-bottom" style="height:56px;">
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        placeholder="请输入学生学号/姓名搜索"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="initData"
                    />
                </el-col>
                <el-col :span="14">
                    <div class="empty-box"></div>
                </el-col>
                <el-col :span="6">
                    <div class="float-right">
                        <el-button type="primary" @click="showImportDialog">导入</el-button>
                        <el-button type="primary" @click="showExportDialog">导出</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="data">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="姓名：">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="学号：">
                                <span>{{ props.row.studentId }}</span>
                            </el-form-item>
                            <el-form-item label="性别：">
                                <span>{{ props.row.gender }}</span>
                            </el-form-item>
                            <el-form-item label="身份证号：">
                                <span>{{ props.row.idCard }}</span>
                            </el-form-item>
                            <el-form-item label="年级：">
                                <span>{{ props.row.grade }}</span>
                            </el-form-item>
                            <el-form-item label="学生类别：">
                                <span>{{ props.row.studentCategory }}</span>
                            </el-form-item>
                            <el-form-item label="学院：">
                                <span>{{ props.row.facultyI18n }}</span>
                            </el-form-item>
                            <el-form-item label="专业：">
                                <span>{{ props.row.professionI18b }}</span>
                            </el-form-item>
                            <el-form-item label="籍贯：">
                                <span>{{ props.row.native }}</span>
                            </el-form-item>
                            <el-form-item label="政治面貌：">
                                <span>{{ props.row.facultyI18n }}</span>
                            </el-form-item>
                            <el-form-item label="电子邮箱：">
                                <span>{{ props.row.email }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式：">
                                <span>{{ props.row.contact }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="学号">
                    <template slot-scope="scope">{{ scope.row.studentId }}</template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">{{ scope.row.studentName }}</template>
                </el-table-column>
                <el-table-column label="学院">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{ scope.row.profession }}</template>
                </el-table-column>
                <el-table-column label="学生类型">
                    <template slot-scope="scope">{{ scope.row.studentTypeI18n }}</template>
                </el-table-column>
                <el-table-column label="籍贯">
                    <template slot-scope="scope">{{ scope.row.native }}</template>
                </el-table-column>
                <el-table-column label="政治面貌">
                    <template slot-scope="scope">{{ scope.row.zzmm}}</template>
                </el-table-column>
                <el-table-column label="联系电话">
                    <template slot-scope="scope">{{scope.row.contact}}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editItem(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
        <advance-query @closeDialog="handlerCloseQueryDialog" v-if="showAdvanceQuery"></advance-query>
        <import-or-export
            @closeImportOrExportDialog="handlerCloseImportOrExportDialog"
            v-if="showImportOrExportDialog"
            :operateType="operateType"
        ></import-or-export>
    </div>
</template>
<script>
import filterCard from "./FilterCard";
import AdvanceQuery from "./AdvanceQuery";
import ImportOrExport from "./importOrExport";
export default {
    components: { filterCard, AdvanceQuery, ImportOrExport },
    data() {
        const getGrade = (function() {
            const now = new Date().getFullYear();
            const years = [];
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i,
                    value: now - i
                });
            }
            return years;
        })();
        return {
            data: [],
            showAdvanceQuery: false,
            showImportOrExportDialog: false,
            operateType: "",
            options: [
                {
                    label: "年级",
                    key: "grade",
                    data: getGrade
                },
                {
                    label: "学院",
                    key: "faculty",
                    data: [],
                    changeCallback: this.changeFaculty
                },
                {
                    label: "专业",
                    key: "profession",
                    data: []
                },
                {
                    label: "学生类别",
                    key: "studentCategory",
                    data: []
                }
            ],
            buttons: [
                {
                    text: "重置",
                    clickCallback: this.reset
                },
                // {
                // 	text: "高级查询",
                // 	clickCallback: this.showAdvanceQueryDialog
                // },
                {
                    text: "筛选",
                    clickCallback: this.initData
                }
            ],
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                grade: "",
                trainingLevel: "",
                studentType: "",
                faculty: "",
                profession: "",
                international: "",
                activeTime: ""
            },
            importDialog: {
                showDialog: false
            }
        };
    },
    methods: {
        showAdvanceQueryDialog() {
            this.showAdvanceQuery = true;
        },
        showImportDialog() {
            this.showDialog(this.importDialog);
            this.operateType = "import";
            this.showImportOrExportDialog = true;
            //this.showDialog(this.importDialog);
        },
        showExportDialog() {
            this.operateType = "export";
            this.showImportOrExportDialog = true;
        },
        showDialog(dialog) {
            dialog.showDialog = true;
        },
        closeDialog(dialog) {
            dialog.showDialog = false;
        },
        initData() {},
        resetData() {
            this.queryForm = {};
            this.initData();
        },
        editItem(row) {},
        deleteItem(row) {},
        handlerCloseQueryDialog() {
            this.showAdvanceQuery = false;
        },
        handlerCloseImportOrExportDialog() {
            this.showImportOrExportDialog = false;
        }
    },
    computed: {
        advancedQueryConditions: {
            get() {},
            set() {}
        }
    }
};
</script>
